<template>
  <el-dialog
    title="新增员工"
    :visible="showDialog"
    @close="handleClose"
    @open="handleOpen"
  >
    <!-- 表单 -->
    <el-form label-width="120px">
      <el-form-item label="姓名">
        <el-input
          style="width: 50%"
          placeholder="请输入姓名"
          v-model="employeeForm.username"
        />
      </el-form-item>
      <el-form-item label="手机">
        <el-input
          style="width: 50%"
          placeholder="请输入手机号"
          v-model="employeeForm.mobile"
        />
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker
          style="width: 50%"
          placeholder="请选择入职时间"
          v-model="employeeForm.timeOfEntry"
        />
      </el-form-item>
      <el-form-item label="聘用形式">
        <el-select
          style="width: 50%"
          placeholder="请选择"
          v-model="employeeForm.formOfEmployment"
        >
          <el-option
            v-for="item in hireTypes"
            :key="item.id"
            :value="item.id"
            :label="item.value"
        /></el-select>
      </el-form-item>
      <el-form-item label="工号">
        <el-input
          style="width: 50%"
          placeholder="请输入工号"
          v-model="employeeForm.workNumber"
        />
      </el-form-item>
      <el-form-item label="部门">
        <el-input
          readonly
          style="width: 50%"
          placeholder="请选择部门"
          @focus="isShow = true"
          v-model="employeeForm.departmentName"
        />
        <el-tree
          :data="deptTreeData"
          :props="{ label: 'name' }"
          v-if="isShow"
          @node-click="handleNodeClick"
        />
      </el-form-item>
      <el-form-item label="转正时间">
        <el-date-picker
          style="width: 50%"
          placeholder="请选择转正时间"
          v-model="employeeForm.correctionTime"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleAdd">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import obj from "@/constant/employees";
import { getDeptListAPI } from "@/api/departments";
import { addEmployeeAPI } from "@/api/employees";
import { list2Tree } from "@/utils/shift";
export default {
  name: "AddEmployee",
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      hireTypes: obj.hireType,
      // 部门属性结构
      deptTreeData: [],
      //控制树形的显示隐藏
      isShow: false,
      //员工表单
      employeeForm: {
        username: "",
        mobile: "",
        formOfEmployment: 1,
        workNumber: "",
        departmentName: "",
        timOfEntry: "",
        correctionTime: "",
      },
    };
  },
  methods: {
    //弹窗关闭时
    //子传父
    handleClose() {
      this.$emit("update:showDialog", false);
    },
    async handleOpen() {
      //发请求
      const resp = await getDeptListAPI();
      //转为树形
      list2Tree((this.deptTreeData = resp.data.depts), "");
    },
    //节点点击
    handleNodeClick(node) {
      if (node.children) return;
      // 赋值展示
      this.employeeForm.departmentName = node.name;
      //点击完毕隐藏
      this.isShow = false;
    },
    // 新增员工
    async handleAdd() {
      // 掉接口发请求
      await addEmployeeAPI(this.employeeForm);
      //关闭弹窗
      this.handleClose();
      //获取员工
      // 方式一1
      // this.$parent.getEmployeeList();
      // 成功提示
      this.$message.success("新增成功");
      // 方式er
      this.$emit("add-success");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tree {
  position: absolute;
  width: 80%;
  min-height: 50px;
  left: 0;
  top: 45px;
  z-index: 100;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-right: 5px;
  overflow: hidden;
  background-color: #fff;
  max-height: 200px;
  overflow: auto;
  ::v-deep {
    .el-tree-node__content {
      height: auto;
    }
  }
}
</style>
